<template>
 <div>
  <div id="content-show" v-html="contract.content">

  </div>
  <el-button v-if="canCheck" @click="check">审核</el-button>
  <el-button @click="print('content-show')">打印</el-button>
  <check-util v-model="checkSync" :checkObj="checkObj" @checkSuc="checkSuc"></check-util>
 </div>
</template>

<script>
  import Vue from 'vue';
  import {Input,DatePicker,Select,Option} from 'element-ui';
  import DateProxy from '@/components/common/contract/DateProxy';
  import CheckUtil from '@/components/common/util/checkUtil';
  import $ from 'jquery';
  export default {
    props: ['value'],
    data(){
      return {
        contract:{
          content: ''
        },
        template:{},
        result:{},
        elMap:{},
        vmMap: {},
        elList:[],
        canCheck: false,
        checkSync: false,
        checkObj:{
          id: '',
          url: '',
          statusCode: '',
          opinionCode: '',
          fileCode:'',
          isChildren:true
        }
      };
    },
    components:{
      DateProxy,
      CheckUtil
    },
    watch:{
      value(val){
        this.value = val;
        this.init();
      }
    },
    mounted(){
     this.init();
    },
    methods:{
      init(){
        if(this.value==''){
          this.contract.content = '';
          this.contract.elList = [];
          return;
        }
        this.axios.post(this.lib.config.host.contract+'/contractmgt/contract/viewContent/'+this.value,{}).
        then(res=>{
          let result = res.data;
          let contract = result.resultMap.contract;
          let isVendor = result.resultMap.isVendor;
          if(contract.checkStatus==3 && contract.confirmStatus==1 && !isVendor){
            this.canCheck = true;
          }
          this.contract = contract;
          this.$nextTick(function () {
            this.setElList();
          })
        }).
        catch(e=>{
          this.showMsg('error',e);
        });
      },
      setElList(){
        let elList = this.contract.elList;
        elList.forEach((item)=>{
        this.$set(this.elMap, item.elId, item);
        if (item.elType === 'input') {
          this.mounteInput(item.elId, item);
        } else if (item.elType === 'select') {
          this.mounteSelect(item.elId, item);
        } else if(item.elType === 'selectUrl'){
          this.mounteSelectUrl(item.elId, item);
        } else if(item.elType === 'span'){
          this.mounteSpan(item.elId, item);
        }else if (item.elType === 'date') {
          this.mounteDate(item.elId, item);
        }else if(item.elType=== 'table'){
          this.mounteTable(item.elId,item);
        }
      });
      },
      mounteInput(id, item){
        let _this = this;
        let val = '';
        debugger;
        if(item.elField!=''){
          val = this.contract[item.elField];
        }else if(this.contract.otherValMap){
          val = this.contract.otherValMap[id];
        }
        this.$set(this.result, item.elId, val);
        new Vue({
          el: '#' + id,
          data:{value:val},
          template: '<span>{{value}}</span>'
        });
      },
      mounteSelectUrl(id, item){
        let _this = this;
        let val = '';
        let config = JSON.parse(item.elFormat);
        if(item.elField!=''){
          val = this.contract[item.elField];
          if(item.elFormat!=''){
            val = this.contract[config.text];
          }
        }else if(this.contract.otherValMap){
          val = this.contract.otherValMap[id];
        }
        this.$set(this.result, item.elId, val);
        new Vue({
          el: '#' + id,
          data:{value:val},
          template: '<span>{{value}}</span>'
        });
      },
      mounteSpan(id, item){
        let _this = this;
        let val = '';
        if(item.elField!=''){
          val = this.contract[item.elField];
        }
        this.$set(this.result, item.elId, val);
        new Vue({
          el: '#' + id,
          data:{value:val},
          template: '<span>{{value}}</span>'
        });
      },      
      mounteSelect(id, item){
        let _this = this;
        let val = '';
        if(item.elField!=''){
          val = this.contract[item.elField];
        }else if(this.contract.otherValMap){
          val = this.contract.otherValMap[id];
        }
        this.$set(this.result, item.elId, val);
        new Vue({
          el: '#' + id,
          data:{value:val},
          template: '<span>{{value}}</span>'
        });
      },
      mounteDate(id, item){
        let _this = this;
        let val = '';
        if(item.elField!=''){
          val = this.contract[item.elField];
        }else{
          val = this.contract.otherValMap[id];
        }
        this.$set(this.result, item.elId, val);
        new Vue({
          el: '#' + id,
          data:{value:val},
          template: '<span>{{value}}</span>'
        });
      },
      mounteTable(id,item){
        let $tb = $('#'+id);
        let config = JSON.parse(item.elContent);

        let $trHead = $tb.find('tr:eq(0)');
         //处理隐藏列
        let $tdList = $trHead.find('th');
        $tdList.each(function(tdIndex){
        if(config[tdIndex].hide == 1){
          $(this).css('display','none');          
        }});  
        

        let itemList = this.contract.itemList;
        
        itemList.forEach(item=>{
          let $tr = $('<tr></tr>');
          config.forEach((n)=>{
            if(n.hide==0){
              let val = item[n.field]?item[n.field]:'';
              $tr.append('<td>'+val+'</td>');
            }
          });
          $tb.append($tr);
        });
        

      },
      check(){
        this.checkObj = {
          id: this.contract.id,
          url : this.lib.config.host.contract+'/contractmgt/contract/check',
          statusCode: 'checkStatus',
          opinionCode: 'checkOpinion',
          fileCode: 'checkAttFile',
          isChildren:true
        }
        this.checkSync = true;
      },
      checkSuc(){
        this.canCheck = false;
        this.$emit('viewRefresh');
      }
    }
  }
</script>

<style>
  #content-show .el-input{
    width: 220px;
  }
  #content-show span{
    text-indent: 0px;
  }
#content-show table {
    border-top: 1px solid #d2dcf8;
    border-right: 1px solid #d2dcf8;
  }

  #content-show table tr th,#content-show td {
    border-bottom: 1px solid #d2dcf8;
    border-left: 1px solid #d2dcf8;
    padding: 4px 6px;
  }

</style>
